<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>云听用户中心</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入vue,后使用element-ui -->
<!--    <script src="https://cdn.bootcss.com/vue/2.6.13/vue.min.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--    <script src="https://unpkg.com/vue/dist/vue.js"></script>-->
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--钉钉-->
    <script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
    <!--引入qs库-->
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
    <script type="text/javascript">
        let qs = Qs;
        console.log(qs);
    </script>
    <!-- style.css -->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="main" id="app">
    <div class="top">
        <div class="top-header">
            <img style="width: 50px;height: 50px;vertical-align: middle;" src="./img/yunting.png">
            <span class="header-title">云听统一身份认证平台</span>
        </div>
    </div>
    <div class="main-container">
        <div class="left">
        </div>
        <div class="right">
            <div style="text-align: center">
                <img style="width: 60px;height: 60px;" src="./img/yunting.png">
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="密码登录" name="first">
                    <form action="/login" method="post">
                        <div class="input" style="width: 100%;height: 60px;">
                            <!--                            <label for="name">用户名</label>-->
                            <input type="text" placeholder="用户名" name="username" id="name"
                                   style="width: 280px;
	                                      height: 38px;
	                                      border: 1px solid #dad9d6;
	                                      background: #ffffff;
	                                      padding-left: 10px;
	                                      padding-right: 10px;
                                          border-radius:5px;">
                            <span class="spin"></span>
                        </div>
                        <div class="input">
                            <!--                            <label for="pass">密码</label>-->
                            <input type="password" placeholder="登录密码" name="password" id="pass"
                                   style="width: 280px;
	                                      height: 38px;
	                                      border: 1px solid #dad9d6;
	                                      background: #ffffff;
	                                      padding-left: 10px;
	                                      padding-right: 10px;
                                          border-radius:5px;">
                            <span class="spin"></span>
                        </div>
                        <br/>
                        <br/>
                        <div class="button login">
                            <button  style="width: 280px;
	                                        height: 38px;
	                                        color: #FFF;
	                                        background: #409EFF;
	                                        line-height: 40px;
	                                        text-align: center;
	                                        border: 0px;
                                            cursor:pointer;
                                            border-radius:5px;
                                            "type="submit">
                                <span class="operate-btn" type="primary" size="small">登 录</span>
                                <i class="fa fa-check"></i>
                            </button>
                        </div>
                    </form>
                    <!--<el-form style="margin-top: 10px;" ref="comForm" :model="loginForm" label-width="0px" :rules="comRules">
                        <el-form-item :label="null" prop="userName">
                            <el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="loginForm.userName">
                            </el-input>
                            &lt;!&ndash; <el-input style="width: 200px" v-model="loginForm.userName" placeholder="请输入用户名" size="small"></el-input> &ndash;&gt;
                        </el-form-item>
                        <el-form-item :label="null" prop="password">
                            <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" show-password v-model="loginForm.password">
                            </el-input>
                            &lt;!&ndash; <el-input style="width: 200px" v-model="loginForm.password" size="small" show-password></el-input> &ndash;&gt;
                        </el-form-item>
                        <el-form-item label-width="0px">
                            <div style="float: left">
                                <el-checkbox v-model="checked" class="rememberMe">记住密码</el-checkbox>
                            </div>
                            <div style="float: right">
                                <el-button type="text" @click="open()" class="forgetPw">忘记密码？</el-button>
                            </div>
                        </el-form-item>
                        <el-form-item style="margin-bottom: 0" label-width="0px">
                            <el-button class="operate-btn" type="primary" size="small" @click="onSubmit">立即登录</el-button>
                        </el-form-item>
                    </el-form>-->
                </el-tab-pane>
                <el-tab-pane label="短信登录" name="second">
                    <el-form style="margin-top: 10px;" ref="telForm" :model="loginForm" label-width="0px" :rules="telRules">
                        <el-form-item :label="null" prop="userName">
                            <el-input placeholder="请输入手机号" prefix-icon="el-icon-mobile-phone" v-model="loginForm.userName"></el-input>
                        </el-form-item>
                        <el-form-item :label="null" prop="password">
                            <el-input placeholder="验证码" prefix-icon="el-icon-key" style="width: 200px" v-model="loginForm.password"></el-input>
                            <el-button class="code-btn" type="primary" v-show="timeTrue === true" @click="acquire">获取验证码</el-button>
                            <el-button class="code-btn" type="primary" v-show="timeTrue === false" :disabled="true">{{ time }}秒</el-button>
                        </el-form-item>
                        <el-form-item label-width="0px">
                            <el-button class="operate-btn" type="primary" size="small" @click="onSubmit">立即登录</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="扫码登录" name="third">
                    <div style="text-align: center;" id="login_container"></div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</div>
</body>
<style>
    .top{
        width: 100%;
        height: 74px;
        line-height: 74px;
        margin-bottom: 5%;
        box-shadow: 0 4px 10px rgba(0,0,0,.4);
    }
    .main{
    }
    .left{
        float: left;
        width: 700px;
        height: 420px;
        background : url("./img/flower.jpg") no-repeat center / 100% 100%;
    }
    .right{
        border: 1px solid rgba(85,85,85,15%);
        padding: 20px 50px;
        float: left;
        height: 420px;
        margin-left: 20px;
    }
</style>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            checked: false,
            activeName: 'first',
            timeTrue: true,
            time: 0,
            loginForm: {
                userName: '',
                password: ''
            },
            appid: "dingoajfp9uov6uonxxxxxx", //自己申请的appid
            appsecret: "V6m2FeU_Ex0HMKmCfA5hV2edZCO_MMsWfWP8ZoCdH4-cTTqkoOIElwhxxxxxxxx", //自己申请的appsecret
            redirectUrl: "http://192.168.1.76:8080/#/login", //这里是扫码成功后跳转的回调地址
            dingCodeConfig: {
                id: "login_container", //匹配到设置的html的id
                style: "border:none;background-color:#FFFFFF;margin: 0 auto;",
                width: "240",
                height: "220",
            }, //生成二维码样式的配置

            telRules: {
                userName: [{
                    pattern: /^[0-9]*$/,
                    message: '必须为数字'
                },
                    {
                        required: true,
                        message: '不能为空!',
                        trigger: 'blur'
                    }
                ],
                password: [{
                    required: true,
                    message: '不能为空!',
                    trigger: 'blur'
                }]
            },
            comRules: {
                userName: [{
                    required: true,
                    message: '不能为空!',
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: '不能为空!',
                    trigger: 'blur'
                }]
            }
        },
        methods: {
            initDingJs() {
                !(function(window, document) {
                    function d(a) {
                        var e,
                            c = document.createElement("iframe"),
                            d = "https://login.dingtalk.com/login/qrcode.htm?goto=" + a.goto;
                            (d += a.style ? "&style=" + encodeURIComponent(a.style) : ""),
                            (d += a.href ? "&href=" + a.href : ""),
                            (c.src = d),
                            (c.frameBorder = "0"),
                            (c.allowTransparency = "true"),
                            (c.scrolling = "no"),
                            (c.width = a.width ? a.width + "px" : "400px"),
                            (c.height = a.height ? a.height + "px" : "400px"),
                            (e = document.getElementById(a.id)),
                            (e.innerHTML = ""),
                            e.appendChild(c);
                    }
                    window.DDLogin = d;
                })(window, document);
            },
            addDingListener() {
                let self = this;
                let handleLoginTmpCode = (loginTmpCode) => {
                    window.location.href =
                        self.getAuthUrl + `&loginTmpCode=${loginTmpCode}`;
                };
                let handleMessage = (event) => {
                    if (event.origin === "https://login.dingtalk.com") {
                        handleLoginTmpCode(event.data);
                    }
                };

                if (typeof window.addEventListener != "undefined") {
                    window.addEventListener("message", handleMessage, false);
                } else if (typeof window.attachEvent != "undefined") {
                    window.attachEvent("onmessage", handleMessage);
                }
            },
            initDingLogin() {
                window.DDLogin(this.getDingCodeConfig);
            },
            handleClick() {
                //暂时用不到
            },
            onSubmit() {
                /* ------ 账号密码的存储 ------ */
                if (this.checked) {
                    let password = this.loginForm.password; // 未加密
                    localStorage.setItem("userId", this.loginForm.userName);
                    localStorage.setItem("password", password);
                    console.log("123")
                } else {
                    localStorage.removeItem("userId");
                    localStorage.removeItem("password");
                }

                //  提交数据
                axios({
                    method: 'post',
                    url: '/login',
                    data: qs.stringify({
                        username: this.loginForm.userName,
                        password: this.loginForm.password
                    }),
                    headers: {
                        'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
                    },
                });
                // window.location.href="127.0.0.1:1112/hello";
                // success: {
                //     window.location.href="127.0.0.1:1112/hello";
                // }
                /*axios({
                    url: '/login',
                    method: 'post',
                    mode: 'navigate',
                    data: {
                        username: this.loginForm.userName,
                        password: this.loginForm.password
                    },
                    transformRequest: [function(data) {

                        let ret = ''
                        for(let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                    headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    /!*success: {
                        window.location.href="127.0.0.1:1112/hello",
                    }*!/

                });*/

            },
            acquire() {
                if (this.loginForm.userName === '') {
                    this.$message.error('请先输入手机号');
                } else {
                    this.timeTrue = false;
                    this.time = 60;
                    let setTimeoutS = setInterval(() => {
                        this.time--;
                        if (this.time <= 0) {
                            clearInterval(setTimeoutS);
                            this.timeTrue = true;
                        }
                    }, 1000);
                }
            },
        },
        computed: {
            getRedirectUrl() {
                return encodeURIComponent(this.redirectUrl);
            },
            getAuthUrl() {
                return `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${this.appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${this.getRedirectUrl}`;
            },
            getGoto() {
                return encodeURIComponent(this.getAuthUrl);
            },
            getDingCodeConfig() {
                return { ...this.dingCodeConfig, goto: this.getGoto };
            },
        },
        created() {
            // 初始化钉钉的二维码加载
            //this.initDingJs();
        },
        mounted() {
            //this.addDingListener();
            //this.initDingLogin();
            let username = localStorage.getItem("userId");
            if (username) {
                this.loginForm.userName = localStorage.getItem("userId");
                this.loginForm.password = localStorage.getItem("password"); //
                this.checked = true;
            }


        }
    })
</script>

</html>
